<template>
  <div class="top">
    <div class="top-title">
      <div>iPhone</div>
      <div>7，在此</div>
      <div>ssssfdsfdgdds</div>
      <div>dvdbddddsgbrssbvvd</div>
    </div>
  </div>
  <div
    style="
      display: flex;
      flex-direction: column;
      gap: 20px;
      background-color: #f2f2f2;
      padding: 20px;
    "
  >
    <el-row :gutter="20">
      <el-col :span="8"><div class="grid-content ep-bg-purple" /></el-col>
      <el-col :span="8"><div class="grid-content ep-bg-purple" /></el-col>
      <el-col :span="8"><div class="grid-content ep-bg-purple" /></el-col>
      <!-- <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col> -->
    </el-row>

    <div class="iphone-type">
      <!-- <div v-for="item in 3" class="headset-son"></div> -->
    </div>
    <el-row :gutter="20">
      <el-col :span="8"><div class="grid-content ep-bg-purple" /></el-col>
      <el-col :span="8"><div class="grid-content ep-bg-purple" /></el-col>
      <el-col :span="8"><div class="grid-content ep-bg-purple" /></el-col>
      <!-- <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col> -->
    </el-row>
    <div class="ss">
      <div>sbjsb</div>
      <div>dbjsjl</div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.top {
  width: 100%;
  height: 450px;
  background-color: antiquewhite;
  display: flex;
  justify-content: center;
  // align-items: center;
  // text-align: center;
  .top-title {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
}
.grid-content {
  height: 500px;
  background-color: chartreuse;
}
.iphone-type {
  height: 350px;
  background-color: white;
}
.ss {
  width: 60%;
  margin: 0 auto;
  background-color: aqua;
  display: flex;
  justify-content: space-between;
}
</style>
